import { ref, Ref } from 'vue';
import _ from 'lodash';
import { useRoute } from 'vue-router';
import OpenSeadragon from 'openseadragon';
import type { Canvas, IEvent, StaticCanvas } from 'fabric/fabric-impl';
import * as Temp from './type.d';

export default function useSigns(
    currentMiniSeriesSet?: Ref<Temp.ShowComponentObj>, 
    viewer?: Ref<OpenSeadragon.Viewer>, 
    fabricCanvas?: Ref<Canvas | null>, 
    getActualNum?: (() => number) | undefined,
    currentSubmenuItem?: Ref<string | number>,
    getInitData?: Function
) {
    const route = useRoute();

    // 内容区左侧列表内容标题显示值
    const submenuVisibile = ref(true);

    // 内容区左侧列表item显示值
    const menuItemVisibile = ref(true);

    // 内容区左侧列表内容标题点击
    const handleSubmenuClick = (visibile: boolean) => {
        currentSubmenuItem!.value = '';
        submenuVisibile.value = !visibile;
        menuItemVisibile.value = !visibile;
    };

    // 左侧列表当前值点击
    const handleSubmenuItemClick = (item: Temp.NidusList) => {
        if (currentSubmenuItem!.value !== item.disease.id) {
            currentSubmenuItem!.value = item.disease.id;
        } else {
            currentSubmenuItem!.value = '';
        };
        currentMiniSeriesSet && (currentMiniSeriesSet.value = item.disease.list);
        // 刷新左侧的病灶列表
        const canvasObjs = window.frabicCanvas?.getObjects();
        viewer?.value.setMouseNavEnabled(false);
        canvasObjs?.map((it: any) => {
            if (it.left === item.markInfo.left && it.top === item.markInfo.top && it.width && it.height && it.left && it.top) {
                let x = it.width / 2;
                let y = it.height / 2;
                const point = new OpenSeadragon.Point(it.left, it.top);
                const viewportPoint = viewer?.value.viewport.deltaPointsFromPixels(point)!;
                viewer?.value.viewport.panTo(viewportPoint);
                window.frabicCanvas?.setActiveObject(it);
                if (route.query.type !== 'create') {
                    it.lockMovementX = true;
                    it.lockMovementY = true;
                    it.lockRotation = true;
                    it.lockScalingFlip = true;
                    it.lockScalingX = true;
                    it.lockScalingY = true;
                    it.lockUniScaling = true;
                    it.hasControls = false;
                    it.hasBorders = true;
                    it.borderColor = '#1FFF79';
                    it.selectable = false;
                }
            }
        });
    };

    return {
        submenuVisibile,
        menuItemVisibile,
        handleSubmenuClick,
        handleSubmenuItemClick
    }
}